
class Dianming2 {


  // 获取所有的学生标签li
  public stus: NodeListOf<HTMLLIElement> = document.querySelectorAll('li')
  // 获取秒数显示的dom
  public countDownDom = document.querySelector('.countdown') as HTMLDivElement
  // 获取开始按钮的dom
  public startBtn = document.querySelector('.btn-start') as HTMLButtonElement
  // 获取结束按钮的dom
  public endBtn = document.querySelector('.btn-end') as HTMLButtonElement
  // 定义settimeout唯一值
  public setTimeOutId: NodeJS.Timeout | undefined
  // 定义setIntervalt唯一值
  public setIntervalId: NodeJS.Timeout | undefined
  public initSNum: number
  // 定义显示倒计时的秒数
  public sNum: number


  constructor(initSNum: number = 9) {
    this.initSNum = initSNum
    this.sNum = this.initSNum
    this.countDownDom.innerText = String(this.sNum)
  }


  //时间倒计时
  countDown() {
    this.setIntervalId = setInterval(() => {
      console.log(this.sNum);
      // 把倒计时的秒数显示到页面上
      this.countDownDom.innerText = String(this.sNum)
      this.sNum--
      // 判断是否小于等于0 清除定时任务
      if (this.sNum <= 0) {
        this.initClear()
      }

    }, 1000);
  }


  // 清除定时任务 并初始化
  initClear() {
    clearInterval(this.setIntervalId)
    clearTimeout(this.setTimeOutId)


    // 定义显示倒计时的秒数
    this.sNum = this.initSNum
    this.countDownDom.innerText = `${this.sNum}`

  }



  // 清除 所有学生的 active 类名效果
  clearStuActiveAll() {
    this.stus.forEach(stu => {
      stu.classList.remove('active')
    });
  }

  // 随记抽取学生添加选中效果
  setRandomStuAddActive() {

    this.clearStuActiveAll()
    // 随记获取一名学生对应的索引值
    let rand = Math.floor(Math.random() * this.stus.length)  // 0.234  ~ 20.234234 => 向下取整  0~20
    this.stus[rand].classList.add('active')

    this.setTimeOutId = setTimeout(() => this.setRandomStuAddActive(), 100);
  }


  /**
   * 绑定事件
   */
  addEventListenerHandler() {
    // document.addEventListener('事件',执行函数)
    // 给开始按钮加上 点击事件
    this.startBtn.addEventListener('click', () => {
      this.countDown()
      this.setRandomStuAddActive()
    })
    // 给结束按钮加上 点击事件
    this.endBtn.addEventListener('click', () => {
      this.initClear()
    })
  }



}


export default Dianming2
